<style lang="scss">
    .mod-tab-btn-tip{
        font-size:12px !important;
        padding:4px 6px !important;
    }
    .mod-tab-btn{
        [class*=" el-icon-"], [class^=el-icon-], .icon{
            /*font-weight:800 !important;*/
            margin:0;
            height:11px;
            width:13px;
            position:relative;
            font-size:13px !important;
            &:before{
                position:absolute;
                top:0;
                left:0;
            }
        }
        &.el-button{
            margin-left:5px;
        }
        > span{
            height:11px;
            width:13px;
            display:block;
            position:relative;
            > span{
                position:absolute;
                top:0;
                left:0;
                display:block;
                text-align:center;
            }
        }
    }
</style>
<template>
    <el-tooltip effect="light" :open-delay="1000" :content="name" placement="top-end" popper-class="mod-tab-btn-tip" :enterable="false">
        <el-button class="mod-tab-btn" size="mini" :type="theType" :icon="theIcon" @click="onClick" :disabled="disabled">
            <span v-if="theText">{{theText}}</span>
        </el-button>
    </el-tooltip>
</template>
<script>
    export default {
        name: 'ui-tab-btn',
        props: {
            name: String,
            disabled: {
                type: Boolean,
                default: false
            },
            icon: String,
            type: String
        },
        data() {
            return {
                theIcon: this.icon,
                theType: this.type,
                theText: ''
            }
        },
        mounted() {
            switch(this.name){
                case '修改':
                case '编辑':
                    this.theIcon = 'el-icon-edit-outline'
                    this.theType = ''
                    break;
                case '增加':
                    this.theIcon = 'el-icon-plus'
                    this.theType = ''
                    break;
                case '删除':
                    this.theIcon = 'el-icon-delete'
                    this.theType = 'danger'
                    break;
                case '取消':
                    this.theIcon = 'erase icon'
                    this.theType = 'danger'
                    break;
                case '查看':
                    this.theIcon = 'el-icon-view'
                    this.theType = ''
                    break;
                case '提交':
                    this.theIcon = 'el-icon-check'
                    this.theType = 'primary'
                    break;
                case '保存':
                    this.theIcon = 'save icon'
                    this.theType = 'primary'
                    break;
                case '审核':
                    this.theIcon = 'el-icon-news'
                    this.theType = ''
                    break;
                case '打印':
                    this.theIcon = 'el-icon-printer'
                    this.theType = ''
                    break;
                case '导出':
                    this.theIcon = 'sign out alternate icon'
                    this.theType = ''
                    break;
                case '导入':
                    this.theIcon = 'sign in alternate icon'
                    this.theType = ''
                    break;
                case '上传':
                    this.theIcon = 'el-icon-upload2'
                    this.theType = ''
                    break;
                case '下载':
                    this.theIcon = 'el-icon-download'
                    this.theType = ''
                    break;
                case '申请':
                    this.theIcon = 'send outline icon'
                    this.theType = ''
                    break;
                case '填报':
                    this.theIcon = 'el-icon-edit'
                    this.theType = ''
                    break;
                case '设置':
                    this.theIcon = 'el-icon-setting'
                    this.theType = ''
                    break;
                case '启用':
                    this.theIcon = 'icon toggle on'
                    this.theType = 'info'
                    // this.theText = 'on'
                    break;
                case '停用':
                    this.theIcon = 'icon toggle off'
                    this.theType = 'success'
                    // this.theText = 'off'
                    break;
                case '关闭':
                    this.theIcon = 'power off icon'
                    this.theType = 'info'
                    break;
                default:
                    break;
            }
        },
        methods: {
            onClick() {
                this.$el.blur()
                this.$emit('click')
            }
        }
    }
</script>
